<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>闲时播报编辑</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/layui.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">

	<style>
		.honor_video {
			width: 200px;
			height: 100px;
		}
	</style>

</head>

<body>

	<div class="layui-row" id="vue-root">
		<div></div>
		<div class="layui-col-md6 layui-col-md-offset3"><br /><br />
			<br /><br />

			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<input autocomplete="off" placeholder="请输入标题" class="layui-input" v-model="item.title">
				</div><br />
			</div>

			<!-- <div class="layui-form-item">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-block">
					<select class="layui-input" v-model="item.status">
						<option :value="undefined" disabled>请选择状态</option>
						<option :value="0">全屏状态</option>
						<option :value="1">二分之一屏状态</option>
					</select>
				</div>
			</div><br /> -->

			<label class="layui-form-label">类型</label>
			<div class="layui-input-block">
				图片 <input type="radio" name="tp" :value="0" title="图片" v-model="item.type">&nbsp;
				<!-- 视频 <input type="radio" name="tp" :value="1" title="视频" v-model="item.type">&nbsp; -->
				文字 <input type="radio" name="tp" :value="2" title="文字" v-model="item.type">&nbsp;
			</div>

			<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
				<input type="file" id="File1" data-vv-as="图片/视频" v-validate="'size:10240'" name="file" :accept="accept"
					@change="upload" ref="file">
			</form>

			<div class="layui-form-item">
				<label class="layui-form-label"> </label>
				<div class="layui-input-block" v-if="item.type==2">
					<textarea rows="5" placeholder="请输入文字" class="layui-textarea" v-model="item.content"></textarea>
				</div>

				<label for="File1" v-else-if="item.type==0||!item.content">
					<img :src="img" id="portrait" style="width: 100px;height: 100px">
				</label>
				<video class="honor_video" controls="controls" :src="img" v-else></video>

				<div class="checkout_state" v-text="err('file')"> </div>

			</div><br />

			<div class="layui-form-item">
				<label class="layui-form-label">设备名称</label>
				<div class="layui-input-block">
					<select class="layui-input" v-model="item.deviceId">
						<option :value="undefined" disabled>请选择设备名称</option>
						<option v-for="device in devices" :key="device.id" :value="device.id" v-text="device.name">
						</option>
					</select>
				</div>
			</div><br />

			<div class="layui-form-item">
				<label class="layui-form-label">播报日期</label>
				<div class="layui-input-block">
					<input class="layui-input" id="test5" :value="period0" placeholder="请选择播报日期">
				</div>
			</div><br />

			<div class="layui-form-item">
				<label class="layui-form-label">播报时间</label>
				<div class="layui-input-block">
					<input class="layui-input" id="test6" :value="period" placeholder="请选择播报时间">
				</div>
			</div><br />

			<br />
			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>


	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>
	<script>

		var schoolId = top_params().id;

		var arr = [null, null, null];

		var app = new Vue(merge({
			data: {
				item: {
					type: 0,
					status: 0
				},
				devices: [],
				url: '/pc/slide2',
				loaded: false
			},
			created: function () {
				this.init();
				axios.get('/pc/device/all/' + schoolId + '?type=2').then(function (res) {
					this.devices = res.data;
				}.bind(this));
			},
			methods: {
				upload: function () {
					this.$validator.validate('file').then(function (result) {
						if (!result) {
							alert('上传文件大小应在10MB以内');
							this.$refs.file.value = '';
							return;
						}

						axios.post('/pc/upload/slide2?schoolId=' + schoolId,
							new FormData(this.$refs.form)).then(function (res) {
								this.item.content = res.data.data;
								this.$refs.file.value = '';
							}.bind(this));
					}.bind(this));

				}
			},
			computed: {
				period0: function () {
					var startDate = this.item.startDate, endDate = this.item.endDate;
					if (!startDate || !endDate) return '';
					return startDate + ' - ' + endDate;
				},
				period: function () {
					var startTime = this.item.startTime, endTime = this.item.endTime;
					if (!startTime || !endTime) return '';
					return startTime + ' - ' + endTime;
				},
				accept: function () {
					var type = this.item.type;
					if (type > 1) return;
					return ['image/*', 'video/*'][type];
				},
				img: function () {
					if (!this.item.content) return '../image/upload.png';
					return '/static/' + schoolId + '/slide2/' + this.item.content;
				},
			},
			watch: {
				'item.type': function (nv, ov) {
					if (!this.loaded) {
						this.loaded = true;
						return;
					}
					arr[ov] = this.item.content;
					this.item.content = arr[nv];
				}
			}
		}));

		laydate.render({
			elem: '#test5',
			type: 'date',
			range: true,
			trigger: 'click',
			done: function (value, date, endDate) {
				value = value.split(' - ');
				Vue.set(app.item, 'startDate', value[0]);
				Vue.set(app.item, 'endDate', value[1]);
			}
		});

		laydate.render({
			elem: '#test6',
			type: 'time',
			range: true,
			trigger: 'click',
			done: function (value, date, endDate) {
				value = value.split(' - ');
				Vue.set(app.item, 'startTime', value[0]);
				Vue.set(app.item, 'endTime', value[1]);
			}
		});

	</script>

</body>

</html>